<template>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto" scroll-to-error>
        <el-form-item label="外部SKU编码" prop="erpSkuId">
            <el-input
                v-model.trim="formData.erpSkuId"
                style="width: 600px"
                maxlength="50"
                show-word-limit
                placeholder="非必填，用于商家ERP、OMS等外部系统" />
        </el-form-item>
        <el-form-item label="商品价格" prop="skuPrice">
            <el-tooltip effect="dark" :content="props.hasActivityMsg" placement="top" :disabled="!props.isActivity">
                <el-input-number
                    v-model="formData.skuPrice"
                    class="sku_price"
                    :controls="false"
                    placeholder="请输入"
                    :min="0"
                    :precision="2"
                    :max="999999999"
                    :disabled="props.isActivity" />
            </el-tooltip>
        </el-form-item>
        <el-form-item label="商品库存" prop="skuStock" class="zw_mb_0">
            <el-input-number
                v-model="formData.skuStock"
                class="sku_stock"
                :controls="false"
                placeholder="请输入"
                :precision="0"
                :min="0"
                :max="999999999"
                :disabled="formData.isErp" />
        </el-form-item>
    </el-form>
</template>

<script setup>
import { inputFormatter } from '@/commons/utils.js';
import { reactive, ref } from 'vue';

const props = defineProps({
    hasActivityMsg: { type: String },
    isActivity: { type: Boolean, default: false }
});
const formRef = ref(null);
const formData = reactive({
    isErp: false,
    erpSkuId: '',
    skuPrice: null,
    skuStock: null
});
const skuPriceValidate = (rule, value, callback) => {
    if (!value && value !== 0) {
        callback(new Error('请输入商品价格'));
    } else if (value <= 0) {
        callback(new Error('商品价格大于0'));
    } else {
        callback();
    }
};
const rules = {
    skuPrice: [{ required: true, validator: skuPriceValidate, trigger: 'blur' }],
    skuStock: { required: true, message: '请输入商品库存', trigger: 'blur' }
};

const validate = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate(res => {
            if (res) {
                resolve();
            } else {
                reject();
            }
        });
    });
};
const echoHandle = query => {
    Object.keys(formData).forEach(key => (formData[key] = query[key]));
};
defineExpose({
    echoHandle,
    validate,
    formData
});
</script>

<style lang="scss" scoped>
.el-input-number {
    display: flex;
    align-items: center;
    width: 166px;

    :deep(.el-input__wrapper) {
        padding: 0 11px;
    }
    :deep(.el-input__inner) {
        text-align: left;
    }
    &::after {
        content: '';
        display: inline-block;
        margin-left: 4px;
    }
}
.sku_price::after {
    content: '元';
}
.sku_stock::after {
    content: '件';
}
</style>
